<template>
  <div class="publish-main gap-col-16">
    <div class="head">
      <!-- <div v-if="service !== null" class="service-type bg-surface">
        <div class="title" @click="selectService">
          <div class="font-size-14 font-weight-500 line-height-140 text-input">{{ $t('info.service.type') }}</div>
          <div class="font-size-16 font-weight-500 line-height-140">{{ SERVICE_NAME[service] }}</div>
        </div>
        <Icon class="" size="16" @click="service = null"></Icon>
      </div>
      <div v-else class="create-service gap-row-5" @click="selectService">
        <div class="font-size-14 font-weight-500">{{ $t('info.service.create') }}</div>
        <Icon class="create-icon " size="16"></Icon>
      </div> -->
      <div class="title font-size-20 font-weight-500 line-height-140 text-center">{{ $t('info.upload.media') }}</div>
      <div class="divider"></div>
    </div>
    <div class="body">
      <div class="tap-zone-border">
        <div class="tap-zone">
          <label class="pointer">
            <Icon size="104" name="gradientImage"></Icon>
            <div class="desc font-size-16 font-weight-500 line-height-140 text-primary">
              {{ $t('info.upload.click') }}
            </div>
            <div class="message font-size-12 font-weight-500 line-height-120 text-subtitle-x">
              <div class="limit text-center">{{ $t('info.upload.limit') }}</div>
              <div class="tip">{{ $t('info.upload.tip1') }}</div>
              <div class="tip">{{ $t('info.upload.tip2') }}</div>
            </div>
            <input
              ref="input"
              type="file"
              accept="video/mp4, video/quicktime, video/x-quicktime, video/mov, video/x-mov, video/avi, image/jpg, image/jpeg, image/png, image/gif"
              multiple
              @change="onFile"
            />
          </label>
        </div>
      </div>
    </div>
    <div class="foot font-size-16 font-weight-500 text-primary">{{ $t('info.upload.next') }}</div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
// import { usePopupDialogStore } from '@/store/popup-dialog'
// import { POPUP_DIALOG_TYPE } from '@/constant'
// import { SERVICE_NAME } from '@/constant/publish'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { usePublishStore } from '@/store/publish'
import { $t } from '@/i18n'

const service = ref(null)

// const { $popupDialog } = usePopupDialogStore()
// function selectService() {
//   $popupDialog(POPUP_DIALOG_TYPE.SERVICE_SELECT, {
//     title: i18n.global.t('info.service.choose'),
//     content: service.value,
//     confirm: (data) => {
//       service.value = data
//     },
//   }).open()
// }

const emits = defineEmits(['toEdit'])
const { $alert } = usePopupDialogStore()
const publishStore = usePublishStore()
const { setFile } = publishStore
async function onFile(evt) {
  const files = evt.target.files
  if (files.length > 0) {
    try {
      await setFile(files, service.value)
      emits('toEdit')
    } catch (e) {
      $alert({
        title: $t('content.publish.createFail'),
        content: e.message,
        confirm: () => {},
        showClose: false,
      }).open()
    }
  }
}

const input = ref(null)
const { onFileInput } = storeToRefs(publishStore)
watch(onFileInput, (v) => {
  if (v === null) {
    input.value.value = null
  }
})
</script>

<style lang="scss" scoped>
.publish-main {
  width: 100%;
  height: calc(100% - 7.375rem);
  display: flex;
  flex-direction: column;
  align-items: center;

  .head {
    width: 100%;
    height: 4.25rem;
    // display: flex;
    // justify-content: flex-end;
    // align-items: flex-end;

    // .service-type {
    //   width: 100%;
    //   height: 3rem;
    //   padding: 0 1rem;
    //   display: flex;
    //   align-items: center;

    //   .title {
    //     flex-grow: 1;
    //   }
    // }

    // .create-service {
    //   display: flex;
    //   justify-content: flex-end;
    //   align-items: center;

    //   .create-icon {
    //     margin-right: 1rem;
    //   }
    // }

    .title {
      padding: 0.75rem 1rem;
    }
    .divider {
      width: calc(100% - 2rem);
      height: 1px;
      margin-left: 1rem;
      background: rgba(215, 215, 215, 0.4);
    }
  }

  .body {
    flex-grow: 1;
    width: calc(100% - 4rem);

    .tap-zone-border {
      width: 100%;
      height: 100%;
      padding: 0.1875rem;
      border-radius: 2rem;
      background: linear-gradient(
        180deg,
        rgb(var(--v-theme-primary-gradient-from)) 0%,
        rgb(var(--v-theme-primary-gradient-to)) 100%
      );

      .tap-zone {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background-color: rgb(var(--v-theme-background));

        label {
          width: 100%;
          height: 100%;
          border-radius: inherit;
          background-color: rgba(var(--v-theme-primary), 0.1);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .desc {
            margin-top: 2rem;
          }

          .message {
            margin-top: 1.75rem;
            padding: 1rem 1.75rem;
            border-radius: 0.1875rem;
            background: rgba(24, 25, 37, 0.65);

            .limit {
              margin-bottom: 0.3125rem;
            }
          }

          input {
            display: none;
          }
        }
      }
    }
  }
}
</style>
